<template>
	<!-- 	<view class="back">
		<view style="width: 100%;height:5vh;margin-top: 5vh">
			<view style="margin-left: 5vw;display: flex; align-items: center;height:5vh;"><text style="color: #fff;">{{venuename}}</text></view>
		</view>
		<view class="div2">
			<view class="div2-2" style="display: flex; align-items: center; justify-content: center;color: #636363;" @click="goSearch()">
			    <view style="float: left;"><u-icon name="search" size="38rpx" color="#636363"></u-icon></view>
			    <view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;"><text>查找相关订单</text></view>
			</view>
		</view>
		
		<view style="width: 100vw;height: 80vh;background: #fff;margin-top: 30rpx;border-radius: 70rpx 70rpx 0rpx 0rpx;padding-bottom:5vh;">
			<view style="height: 5vh;">
				<u-alert title="分配课程成功"  type = "success" closable="true" v-if="show==true" center="true"></u-alert>
				<u-alert :title="errTitle"  type = "warning" closable="true" v-if="errShow==true" center="true" ></u-alert>
			</view>
			<view style="overflow: auto;height: 75vh;width: 100%;">
				<view style="width: 90%;background-color: #fff;margin: 0 auto;padding: 20rpx;box-sizing: border-box;box-shadow: 0 2px 10px #dfdfdf;margin-bottom: 18px;" v-for="item in courseList">
					<view @click.stop="openTrain(item)" style="width: 85vw;background-color: #F7F7F7;margin: 0 auto;height: 200rpx;padding: 5px;box-sizing: border-box;margin-top: 10rpx;">
						<view style="width: 200rpx;height: 200rpx;float: left;">
							<view style="width: 160rpx;height: 160rpx;margin-left:10rpx;margin-top:10rpx ;">
								<image class="imagg" :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.memberUserPhoto"></image>
							</view>
						</view>
						<view style="font-size: 26rpx;float: left;color: #5C5C5C;width: 60%;">
							<view style="height: 35rpx;">
								<view style="display: flex;align-items: center;"><u-icon name="account"></u-icon>学员姓名：{{item.memberUserRealName}}</view>
							</view>
							<view style="margin-top:20rpx;height: 35rpx;">
								<view style="display: flex;align-items: center;"><u-icon name="phone"></u-icon>联系电话：{{item.memberUserPhone}}</view>
							</view>
							<view style="margin-top:20rpx;height: 35rpx;" v-if="item.isAllocation=='0'">
								<view style="display: flex;align-items: center;"><u-icon name="hourglass-half-fill"></u-icon>课程进度：{{item.schedule}}</view>
							</view>
							<view style="height: 50rpx; display: flex; justify-content: flex-end;">
							  <view style="width: 180rpx;" v-if="item.isAllocation=='1'"  @click.stop="selectUser(item)">
								  <picker mode="selector" :range="planList" :value="selectedIndex" @change="handleChange" range-key="seriesName">
								  		<view  style="margin-top:20rpx;color:#fff;height: 50rpx; border-radius: 10rpx; background-image: linear-gradient(to bottom right, #94A9FD, #9ECFFF, #b9e1ff); display: flex; align-items: center; justify-content: center;">
								  		  <text style="letter-spacing: 4px;font-size: 24rpx;">&nbsp;分配课程</text>
								  		</view>
								</picker>
							  </view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view> -->
	<view class="view">
		<view style="height: 13%;">
			<view>
				<image style="width: 80rpx;height:80rpx;margin-left: 50rpx;position: relative;top:95rpx;"
					class="shrink-0 image_3"
					src="https://ide.code.fun/api/image?token=658020ebfcfbac001139fd4f&name=3b8f508d119d287a8dfc01e289624070.png" />
			</view>
			<view class="div2">
				<view class="div2-2"
					style="display: flex; align-items: center; justify-content: center;color: #636363;margin-top: 15rpx;"
					@click="goSearch()">
					<view style="float: left;">
						<image style="width: 40rpx;height: 40rpx;margin-left: -90rpx;" src="../../static/哑铃.png" alt="">
						</image>
					</view>
					<view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;">
						<text style="font-weight: bold;">追云健身俱乐部</text>
					</view>
				</view>
			</view>
		</view>
		<view class="view2">
			<!-- <view style="height: 5vh;">
				<u-alert title="分配课程成功" type="success" closable="true" v-if="show==true" center="true"></u-alert>
				<u-alert :title="errTitle" type="warning" closable="true" v-if="errShow==true" center="true"></u-alert>
			</view> -->
			<view style="width: 100%;height: 23%;" v-for="item in courseList">
				<!-- <view style="width: 100%;height: 15%;"></view> -->
				<view class="view3">
					<view class="view4">
						<image class="imagg"
							:src="'http://101.43.223.224:8765/image/getImageById?id=' + item.memberUserPhoto"></image>
					</view>

					<view class="view5" @click.stop="openTrain(item)">
						<view style="display: flex;align-items: center;margin-top: 24rpx;">
							<u-icon name="account" size="25px" style="color: rgba(92, 92, 92, 1);"></u-icon>
							<text
								style="color: rgba(92, 92, 92, 1);font-size: 30rpx;">学员姓名：{{item.memberUserRealName}}</text>
						</view>
						<view style="display: flex;align-items: center;margin-top: 24rpx;">
							<u-icon name="phone" size="25px" style="color: rgba(92, 92, 92, 1);"></u-icon>
							<text
								style="color: rgba(92, 92, 92, 1);font-size: 30rpx;">联系电话：{{item.memberUserPhone}}</text>
						</view>
						<view style="display: flex;align-items: center;margin-top: 24rpx;"
							v-if="item.isAllocation=='0'">
							<u-icon name="calendar" size="25px" style="color: rgba(92, 92, 92, 1);"></u-icon>
							<text style="color: rgba(92, 92, 92, 1);font-size: 30rpx;">课程进度：{{item.schedule}}</text>
						</view>
						<view style="float: left; display: flex;align-items: center;margin-top: 24rpx;"
							v-if="item.isAllocation=='1'">
							<u-icon name="calendar" size="25px" style="color: rgba(92, 92, 92, 1);"></u-icon>
							<text style="color: rgba(92, 92, 92, 1);font-size: 30rpx;">
								课程进度：暂无课程
							</text>
						</view>
						<view style="float: left; display: flex;align-items: center;margin-top: 24rpx;">
							<u-icon name="account" size="25px" style="color: rgba(92, 92, 92, 1);"></u-icon>
							<text style="color: rgba(92, 92, 92, 1);font-size: 30rpx;">
								学员备注：{{item.coachNotes}}
							</text>
						</view>
					</view>
					<view class="view6" @click="open(item)">
						<view class="view7"></view>
						<view class="view7"></view>
						<view class="view7"></view>
					</view>
					<u-popup :show="shows" :round="10" position="bottom" @close="close" :overlayOpacity="0.08">
						<view style="width: 200rpx;height: 200rpx;">
							<view style="height: 30rpx;"></view>
							<view @click.stop="selectUser(itemss)">
								<picker mode="selector" :range="CoachList" :value="selectedIndex" @change='StudentHandover'
									range-key="coachName">
									<text style="margin-left: 45rpx;">学员转交</text>
								</picker>
							</view>
							
							<view style="height: 30rpx;"></view>
							<text style="margin-left: 45rpx;" @click="diaNotes(itemss)">修改备注</text>
							<view style="height: 30rpx;"></view>
							<view @click.stop="selectUser(itemss)">
								<picker mode="selector" :range="planList" :value="selectedIndex" @change='handleChange'
									range-key="seriesName">
									<text style="margin-left: 45rpx;">分配课程</text>
								</picker>
							</view>
							<view style="height: 30rpx;"></view>
						</view>
					</u-popup>

					<!--修改学员备注!-->
					<u-popup :show="NoteStatus" mode="center" :overlayOpacity="0.08" @close="noteClose" :round="10">
						<view style="width: 550rpx;height: 400rpx;background: white;">
							<view style="float: left;width: 96%;border: 1px solid black;margin-left: 2%;">
								<text style="font-size: 40rpx;margin-left: 35%;">修改备注</text>
							</view>
							<view style="float: left;width: 100%;margin-top: 5%;">
								<text
									style="font-size: 40rpx;margin-left: 10%;">学员姓名:{{NoteUser.memberUserRealName}}</text>
							</view>
							<view style="float: left;width: 100%;margin-top: 50rpx;">

								<view style="float: left;font-size: 40rpx;margin-left: 10%;">学员备注:</view>
								<input placeholder="请输入备注" v-model="NoteUser.coachNotes"
									style="float: left;font-size: 40rpx;width: 50%;margin-left: 5%;margin-top: 2px;" />
							</view>
							<view style="float: left;margin-top: 10%;width: 100%;">
								<button style="float: left;margin-left: 10%;background: rgb(49, 178, 220);"
									@click="noteClose">取消</button>
								<button style="float: right;margin-right: 10%;" @click="goUpNotes">确定</button>
							</view>
						</view>
					</u-popup>
				</view>
			</view>
		</view>
		<view style="width:10rpx; height: 9%;"></view>
		<tabbar selected-index=1></tabbar>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				messageText: '',
				title: 'picker',
				errTitle: '',
				selectedIndex: 0,
				selectPlan: {},
				selectId: 0,
				multiArray: [],
				index: 0,
				show: false,
				errShow: false,
				courseList: [],
				venuename: uni.getStorageSync('venuename'),
				planList: [],
				current: 0,
				selectStatus: 1,
				dayOfMonth: 0,
				daySelect: 0,
				today: '',
				msgType: 'sussess',
				shows: false,
				itemss: {},
				NoteUser: {}, //备注信息
				NoteStatus: false, //修改备注弹窗
				CoachList:[],   //所有教练
			}
		},
		onShow() {
			this.getReservation()
			this.getPlan()
			this.getAction()
			this.getAllCoach()
		},
		methods: {
			//查询所有教练
			getAllCoach(){
				uni.request({
					url: 'http://127.0.0.1:17000/AppCoach/getCoachByVenueUniqueIdentifier',
					method:'GET',
					data:{
						VenueUniqueIdentifier:uni.getStorageSync('teacherinfo').venueUniqueIdentifier,
						id:uni.getStorageSync('teacherinfo').id
					},
					success: (resp)=>{
						console.log("********************")
						this.CoachList=resp.data.data
						console.log(this.CoachList)
					}
				})
			},
			//修改
			goUpNotes() {
				
				console.log(this.NoteUser)
				uni.request({
					url: 'http://127.0.0.1:17000/AppCoach/upNotes',
					method: 'POST',
					data: this.NoteUser,
					success: (resp) => {
						if (resp.data.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'success',
								duration: 2000,
							});
							this.NoteStatus = false
							this.shows = false

						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'error',
								duration: 2000
							});
						}
					}
				})
			},
			//修改备注
			diaNotes(item) {
				console.log(item)
				this.NoteUser = item
				this.NoteStatus = true
			},
			//关闭弹窗
			noteClose() {
				this.NoteStatus = false
			},
			open(item) {
				this.itemss = item
				this.shows = true
			},
			close() {
				this.shows = false
			},
			getAction() {

			},
			selectUser(item) {
				this.selectId = item.id
			},
			//分配课程
			handleChange(e) {
				const selectedIndex = e.detail.value; // 获取选中的索引
				const selectPlan = this.planList[selectedIndex]; // 获取选中的对象数据
				var ths = this;
				uni.request({
					url: this.URL + 'vipPlan/memberAddPlan',
					method: 'POST',
					data: {
						memberId: ths.itemss.id,
						seriesId: selectPlan.id
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.code == 200) {
							ths.getReservation()
							ths.shows = false
							ths.show = true
							setTimeout(() => {
								ths.show = false;
								this.itemss = {}
							}, 2000);
						} else {
							ths.errShow = true
							ths.errTitle = res.data.data
							setTimeout(() => {
								// this.itemss = {}
								ths.errShow = false;
							}, 2000);
						}

					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})

			},
			//学员转交
			StudentHandover(e){
				const selectedIndex = e.detail.value; // 获取选中的索引
				const selectCoach = this.CoachList[selectedIndex]; // 获取选中的对象数据
				console.log(selectCoach)
				const memberid=this.itemss.id
				uni.request({
					url: this.URL + 'AppCoach/studentHandover',
					method:'POST',
					data:{
						memberId:memberid,//学员id
						oldCoachId:uni.getStorageSync('teacherinfo').id,//旧教练id
						coachId:selectCoach.id,    //新教练id
						coachCode:selectCoach.coachCode,//教练邀请码
						venueUniqueIdentifier:uni.getStorageSync('teacherinfo').venueUniqueIdentifier//场地标识符
					},
					success: (resp)=>{
						if(resp.data.code==200){
							uni.showToast({
								title: '转交成功，请等待教练通过',
								icon: 'success',
								duration: 2000,
							});
						}else{
							uni.showToast({
								title: '上一个申请未通过',
								icon: 'error',
								duration: 2000,
							});
						}
					}
				})
			},
			getReservation() {
				var ths = this;
				uni.request({
					url: this.URL + 'AppCoach/getStudentByTeacherId',
					method: 'GET',
					data: {
						coachCode: uni.getStorageSync('teacherinfo').coachCode,
					},
					// userInfo:res.
					success: function(res) {
						ths.courseList = res.data.data;
						console.log(ths.courseList)
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			getPlan() {
				var ths = this;
				uni.request({
					url: this.URL + 'vipPlan/selectSeries',
					method: 'GET',
					data: {
						coachId: uni.getStorageSync('teacherinfo').id,
						venueUniqueIdentifier: uni.getStorageSync('teacherinfo').venueUniqueIdentifier,
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.code == 200) {
							ths.planList = res.data.data;
						} else {
							ths.planList = []
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			goSearch() {

			},
			openTrain(item) {
				uni.navigateTo({
					url: '/pages/coach/Reservation/Reservation?item=' + JSON.stringify(item)
				})
			},
		}
	}
</script>

<style>
	.back {
		/* position: relative; */
		width: 100%;
		height: 100vh;
		background-color: rgba(237, 245, 247, 1);
		/* overflow: hidden; 超出部分隐藏，可根据需求调整 */
	}

	.view {
		width: 100%;
		height: 100vh;
		background-color: rgba(237, 245, 247, 1);
		/* overflow: hidden; */
	}

	.view1 {
		width: 100%;
		height: 12%;
	}

	.view2 {
		width: 100%;
		height: 86%;
		overflow: auto;
	}

	.view3 {
		width: 95%;
		height: 90%;
		border-radius: 10px;
		margin-left: 2.5%;
		box-shadow: 0 2px 5px #cacaca;
		background-color: white;
	}

	.view4 {
		width: 120rpx;
		height: 120rpx;
		border-radius: 120px;
		float: left;
		margin-top: 30rpx;
		margin-left: 10rpx;
	}

	.imagg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 120px;
		margin-top: 40rpx;
		margin-left: 10rpx;
	}

	.view5 {
		width: 410rpx;
		height: 230rpx;
		float: left;
		margin-left: 30rpx;
		margin-top: 17rpx;
	}

	.view6 {
		float: left;
		width: 70rpx;
		height: 60rpx;
		margin-left: 35rpx;
		margin-top: 20rpx;
	}

	.view7 {
		width: 10rpx;
		height: 10rpx;
		border-radius: 10px;
		float: left;
		margin-left: 10rpx;
		margin-top: 10rpx;
		background-color: rgba(110, 231, 240, 1);
	}

	.div2 {
		width: 100%;
		height: 5vh;
	}

	.div2-2 {
		background-color: #fff;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}






	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.week-item-d1 {
		background-color: #9da4ff;
		width: 23px;
		height: 23px;
		margin: 0 auto;
		border: #92A3FD;
		border-radius: 50%;
		margin-top: 1vh;
		font-size: 28rpx;
		padding-top: 2px;
		box-sizing: border-box;
		padding-right: 3rpx;
	}

	/* .div2 {
		width: 100%;
		height: 5vh;
	} */

	/* .div2-2 {
		background-color: #fff;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 90%;
		margin: 0 auto;
	} */

	.week-display {
		display: flex;
		justify-content: space-between;
		color: #fff;
		width: 90%;
		height: 8vh;
		margin: 0 auto;
		margin-top: 2vh;
	}

	.week-item {
		flex: 1;
		text-align: center;
	}



	.back::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to bottom right, #94A9FD, #9ECFFF, #b9e1ff);
		z-index: -1;
	}

	.homeclick {
		height: 70rpx;
		width: 70rpx;
		margin-top: 20rpx;
	}

	.dao {
		float: left;
		width: 50%;
		margin: 0 auto;
		margin-top: 20rpx;
		height: 45rpx;
		font-size: 25rpx;
	}

	.dao-1 {
		border-bottom: skyblue 3px solid;
		width: 30%;
		margin: 0 auto;
		height: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dao-2 {
		width: 30%;
		margin: 0 auto;
		height: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>